<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="任务名称">
        <el-input v-model="formInline.quest" placeholder="任务名称"></el-input>
      </el-form-item>
      <el-form-item label="加工状态">
        <el-select v-model="formInline.statu" placeholder="请选择" clearable>
          <el-option  label="未加工" value="1"></el-option>
          <el-option  label="加工中" value="2"></el-option>
          <el-option  label="已加工" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="openAdd">添加</el-button>
        <el-button type="primary" @click="excel">导出excel</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="processId"
        label="加工厂id"
        width="100">
      </el-table-column>
      <el-table-column
        prop="processName"
        label="加工厂名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="quest"
        label="任务名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="questNum"
        label="任务数量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="加工时间"
        width="200">
      </el-table-column>
      <el-table-column
        prop="cropName"
        label="农作物名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="cargoName"
        label="仓库名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="retailName"
        label="零售商名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="provinceName"
        label="省/市/区"
        width="200">
        <template v-slot="s">
          {{s.row.provinceName}} -- {{s.row.cityName}} -- {{s.row.areaName}}
        </template>
      </el-table-column>
      <el-table-column
        prop="statu"
        label="加工状态"
        width="120">
        <template v-slot="s1">
          <el-tag type="info" v-if="s1.row.statu==1">未加工</el-tag>
          <el-tag type="" v-if="s1.row.statu==2">加工中</el-tag>
          <el-tag type="success" v-if="s1.row.statu==3">已加工</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="pic"
        label="图片"
        width="120">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="120">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="openUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="del(scope.row.processId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="加工厂名称" :label-width="formLabelWidth" prop="processName">
          <el-input v-model="form.processName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader
            v-model="areaIds"
            :options="options"
            @change="getchange"
            clearable></el-cascader>
        </el-form-item>

        <el-form-item label="任务名称" :label-width="formLabelWidth">
          <el-input v-model="form.quest" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="任务数量" :label-width="formLabelWidth">
          <el-input v-model="form.questNum" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="加工时间" :label-width="formLabelWidth" prop="createTime">
          <el-date-picker
            v-model="form.createTime"
            type="date"
            placeholder="选择日期"
            clearable>
          </el-date-picker>
        </el-form-item>

        <el-form-item label="农作物" :label-width="formLabelWidth" prop="cropId">
          <el-select v-model="form.cropId" placeholder="请选择农作物">
            <el-option
              v-for="item in cropList"
              :key="item.cropId"
              :label="item.name"
              :value="item.cropId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="仓库" :label-width="formLabelWidth" prop="cargoId">
          <el-select v-model="form.cargoId" placeholder="请选择仓库">
            <el-option
              v-for="item in cargoList"
              :key="item.cargoId"
              :label="item.cargoName"
              :value="item.cargoId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="零售商" :label-width="formLabelWidth" prop="retailId">
          <el-select v-model="form.retailId" placeholder="请选择零售商">
            <el-option
              v-for="item in retailList"
              :key="item.shopId"
              :label="item.productName"
              :value="item.shopId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="加工状态" :label-width="formLabelWidth">
          <el-radio v-model="form.statu" label="1">未加工</el-radio>
          <el-radio v-model="form.statu" label="2">加工中</el-radio>
          <el-radio v-model="form.statu" label="3">已加工</el-radio>
        </el-form-item>

        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
            :headers="imgupload.headers"
            :action="imgupload.url + '?updateSupport=' + imgupload.updateSupport"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {listProcess,getList,addProcess,gettype,getRetail,getCargo,getCrop,getSearch,delList} from "../../api/farme/farme";
import {getToken} from "@/utils/auth";

export default {
  name: "ProcessView",
  data() {
    return {
      formInline:{},
      status:[],
      pageNum:1,
      tableData:[],
      total:0,
      areaIds:[0,0,0],
      options:[],
      pageSize:3,
      form:{},
      imgupload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/farmes/cargo/uploadFile"
      },
      dialogFormVisible:false,
      formLabelWidth:'120px',
      cropList:[],
      cargoList:[],
      retailList:[],
      imageUrl:'',
      title: "",
      rules: {
        processName: [
          {required: true, message: '请输入加工厂名称', trigger: 'blur'},
        ],
        createTime: [
          {required: true, message: '请输入加工时间', trigger: 'blur'},
        ],
        cropId: [
          {required: true, message: '请输入农作物名称', trigger: 'blur'},
        ],
        cargoId: [
          {required: true, message: '请输入仓库名称', trigger: 'blur'},
        ],
        retailId: [
          {required: true, message: '请输入零售商名称', trigger: 'blur'},
        ],
      },

    }
  }, methods: {
    excel(){
      window.location.href="/farmes/process/download"
      // getExcel().then(res=>{
      //   window.location.href=this.axios.defaults.baseURL+"service/process/export"
      // })
    },
    getretailList(){
      getRetail().then(res=>{
        this.retailList=res.data;
      })
    },
    getcargoList(){
      getCargo().then(res=>{
        this.cargoList=res.data;
      })
    },
    getcropList(){
      getCrop().then(res=>{
        this.cropList=res.data;
      })
    },
    list(){
      listProcess(this.formInline,this.pageNum,this.pageSize).then(res=>{
        this.tableData=res.data.list;
        this.total=res.data.total;
      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.list();
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.list();
    },
    getStatus() {
      getList().then(res=>{
        this.status=res.data;
      })
    },
    getType() {
      gettype().then(res=>{
        this.options=res.data;
      })
    },
    getchange(id){
      console.log(id);
      if (id.length>0){
        this.form.provinceId=id[0];
        this.form.cityId=id[1];
        this.form.areaId=id[2];
      }else{
        this.form.provinceId='';
      }
    },
    del(processId){
      delList(processId).then(res=>{
        if (res.code==200){
          this.$message.success("删除成功");
          this.list();
        }else{
          this.$message.success("删除失败");
          this.list();
        }
      })
    },
    openAdd(){
      this.areaIds=[];
      this.form.processId = "";
      this.form={statu:'1'};
      this.dialogFormVisible=true;
      this.title = "添加加工表";
    },
    openUpdate(row){
      this.dialogFormVisible=true;
      this.title = "修改加工表";
      this.areaIds=[];
      this.form=row;
      if (row.provinceId){
        this.areaIds.push(row.provinceId,row.cityId,row.areaId);
      }
      console.log(this.areaIds);
      getSearch(this.form.processId).then(res=>{
        this.form=res.data;
        this.form.cropName=res.data.cropName;
        this.form.cargoName=res.data.cargoName;
        this.form.productName=res.data.productName;1
      })

    },
    addOrUpdate(){
      if (this.form.processId!=undefined){
        addProcess(this.form).then(res=>{
          this.$message.success("修改成功");
          this.dialogFormVisible=false;
          this.list();
        })
      }else {
        addProcess(this.form).then(res=>{
          this.dialogFormVisible=false;
          this.$message.success("添加成功");
          this.list();
        })
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.pic=res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }, created() {
    this.list();
    this.getStatus();
    this.getType();
    this.getcropList();
    this.getcargoList();
    this.getretailList();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
